<template>
  <div class="container">
    <img src="../../assets/image/login_background.jpg" alt="" class="background-img"/>
    <div class="login-box">
      <div class="login-tab">
        <div class="login-tab">登录</div>
        <div class="register-tab" @click="toRegister">注册</div>
      </div>
      <div class="login-card">
        <div class="left-img">
          <div class="float-tip">欢迎使用眼疾智能识别系统</div>
          <img src="../../assets/image/login_left_image.png" alt="" class="login-left-img"/>
        </div>
        <div class="blank"></div>
        <div class="right-login-info">
          <div class="right-inner-box">
            <div class="login-title">
              <img src="../../assets/icon/logo_title.png" alt=""/>
            </div>
            <div class="login-form">
              <el-form :model="form" ref="form" :rules="rules">
                <el-form-item prop="username" v-if="isPhoneLogin === false">
                  <div class="form-label">
                    <img src="../../assets/icon/username.png" alt="" class="img-icon"/>
                    <div class="line">|</div>
                    <div>用户名</div>
                  </div>
                  <el-input class="form-input" placeholder="请输入用户名" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item prop="phone" v-else>
                  <div class="form-label">
                    <img src="../../assets/icon/phone.png" alt="" class="img-icon"/>
                    <div class="line">|</div>
                    <div>手机号</div>
                  </div>
                  <el-input class="form-input" placeholder="请输入手机号" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item prop="password" v-if="isPhoneLogin === false">
                  <div class="form-label">
                    <img src="../../assets/icon/password.png" alt="" style="width: 25px;height: 25px"/>
                    <div class="line">|</div>
                    <div>密码</div>
                  </div>
                  <el-input class="form-input" placeholder="请输入密码" type="password" v-model="form.password"
                            @keyup.enter.native="login"></el-input>
                </el-form-item>
                <el-form-item prop="code" v-else>
                  <div class="form-label">
                    <img src="../../assets/icon/code.png" alt="" style="width: 25px;height: 25px"/>
                    <div class="line">|</div>
                    <div>验证码</div>
                  </div>
                  <el-input class="form-input" placeholder="请输入短信验证码" type="password" v-model="form.code"
                            @keyup.enter.native="login">
                    <template slot="append">
                      <el-button size="mini" @click="getPhoneCode" :disabled="disableGetCode">{{codeText}}</el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-button round type="primary" class="login-btn" @click="login">登录</el-button>
                <div class="switch-to-phone">
                  <el-link type="primary" @click="switchLoginMethod">{{isPhoneLogin === true ? '用户名密码登录' : '短信验证登录'}}</el-link>
                </div>
                <div class="tip">
                  <el-link type="info" :underline="false" :disabled="true">还没有账号？</el-link>
                  <el-link type="primary" @click="toRegister">立即注册</el-link>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getVerificationCode, login} from "@/api/login";

export default {
  name: 'Login',
  data() {
    return {
      // 倒计时定时器id
      intervalId: '',
      // 是否禁止点击获取验证码按钮
      disableGetCode: false,
      // 获取短信验证码的倒计时和文本
      countDown: 60,
      codeText: '获取短信验证码',
      isPhoneLogin: false,
      form: {
        username: '',
        password: '',
        phone: '',
        code: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '手机号长度为11位', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 4, max: 4, message: '验证码为4位', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 获取手机短信验证码
    getPhoneCode() {
      if ( this.form.phone === '' ) {
        this.$message.warning('请先填写手机号')
        return;
      }

      if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
        this.$message.warning('手机号码有误，请重新输入')
        return;
      }

      // 对获取短信验证码按钮进行处理
      let that = this;
      this.disableGetCode = true;
      this.intervalId = setInterval(() => {
        that.codeText = `${that.countDown}秒后重新获取`
        that.countDown --;

        if ( that.countDown === 0 ) {
          clearInterval(that.intervalId)
          that.disableGetCode = false
          that.countDown = 60
          that.codeText = '获取短信验证码'
        }
      },1000)

      // 获取验证码
      getVerificationCode(this.form.phone).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message)
        } else {
          this.$message.success('验证码已发送，请注意查收')
        }
      })
    },
    // 切换登陆方式触发
    switchLoginMethod() {
      this.isPhoneLogin = !this.isPhoneLogin
      this.form = {
        username: '',
        password: '',
        phone: '',
        code: ''
      }
    },
    toRegister() {
      this.$router.push('/register')
    },
    login() {
      login(this.form).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message)
        } else {
          sessionStorage.setItem("token", res.data)
          this.$notify.success({
            title: '登录成功',
            message: '欢迎您再次来到眼疾智能识别系统，正在跳转...'
          })
          this.$router.push('/home')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;

  .background-img {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 65%;
    transform: translate(-50%, -50%);

    .login-tab {
      display: flex;
      width: 100%;
      height: 6%;
      position: relative;

      .login-tab::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url("../../assets/image/login_active.png");
        background-size: 100% 100%;
        border-bottom: 1px solid #fff;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
      }

      .login-tab {
        position: absolute;
        width: 15%;
        height: 100%;
        right: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        border-bottom: 1px solid #fff;

        z-index: 99;
        color: rgb(117, 152, 227);
      }

      .register-tab::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url("../../assets/image/register_normal.png");
        background-size: 100% 100%;
        border-bottom: 1px solid #fff;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
      }

      .register-tab {
        position: absolute;
        width: 15%;
        height: 100%;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;

        z-index: 0;
        color: rgb(255, 255, 255);
        cursor: pointer;
      }
    }

    .login-card {
      position: absolute;
      width: 100%;
      height: 100%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: #fff;
      border: 1px solid #fff;

      display: flex;

      .left-img {
        width: 50%;
        height: 100%;
        position: relative;

        .float-tip {
          position: absolute;
          width: 40%;
          color: #fff;
          font-weight: bold;
          top: 10%;
          display: flex;
          align-items: center;
          justify-content: center;

          background: url("../../assets/image/login_normal.png");
          background-size: 100% 100%;
          border-bottom: 1px solid rgb(104, 152, 228);
          border-top-right-radius: 25px;
          font-size: 17px;
        }

        .login-left-img {
          width: 100%;
          height: 100%;
        }
      }

      .blank {
        width: 15%;
      }

      .right-login-info {
        flex: 1;
        height: 100%;

        .right-inner-box {
          width: 90%;
          height: 100%;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;

          .login-title {
            font-size: 26px;
            font-weight: bold;
            height: 25%;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
          }

          .login-form {
            flex: 1;
            width: 100%;

            .form-label {
              display: flex;
              font-size: 18px;
              align-items: center;
              color: rgb(104, 152, 228);
              font-weight: bold;

              .img-icon {
                width: 30px;
                height: 30px;
              }

              .line {
                margin-left: 10px;
                margin-right: 10px;
              }
            }

            ::v-deep .el-input__inner {
              border-top-width: 0px;
              border-left-width: 0px;
              border-right-width: 0px;
              border-bottom-width: 1px;
            }

            .login-btn {
              width: 100%;
              margin-top: 5%;
            }

            .switch-to-phone {
              margin-top: 3%;
              float: left;
            }

            .tip {
              margin-top: 3%;
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>